Tailwind CSSで独自にstyleを定義する

globalでよく使うサイズとかのthemeの変数を用意して、project内で使う選択肢を制限できる

customするにもある程度ルールを設けといたほうが良さそう

コンフリクト起こす

どこで定義されたのかわからなくなる

独自ルールが増えすぎると記憶が死ぬ

パターンの軸が多すぎる

既存のkeyに対して変更するか、新しいkeyを導入するか

後者は、CSSかPluginとして書く

JSで書くか、CSSで書くか

Customizeするパターン

keyは既存のものを使いながら、中身を変更する

独自の新しいkeyを導入する

静的に書くパターンと、動的に書くパターンとある

定義済みのものを利用する際に、ルールを無視する

新しくkeyを導入する際に、なぜPluginsを使わないのか？

実際、機能が重複しているので以下のように書くとルールがコンフリクトする

元々、以下のようなルールが入っている

code:css

.rounded-2xl {

border-radius: 1rem

}

Pluginでツールを追加

code:tailwind.config.js

module.exports = {

plugins: [

function ({ addUtilities }) {

addUtilities({

'.rounded-2xl': {

'border-radius': '0.3rem',

},

});

},

],

};

CSSでも同じものを追加

code:global.css

@tailwind base;

@tailwind components;

@tailwind utilities;

@layer utilities {

.rounded-2xl {

border-radius: 0.2rem;

}

}

関数

theme()

screen()